<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>报表组件</title>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
		<!-- 添加导入3D支持 -->
		<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts-gl/2.0.8/echarts-gl.min.js"></script>
		<!-- jquery -->
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="main" style="width: 1200px;height:800px;"></div>

		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			$.getJSON('data/flights.json', function(data) {
				var airports = data.airports.map(function(item) {
					return {
						coord: [item[3], item[4]]
					};
				});

				function getAirportCoord(idx) {
					return [data.airports[idx][3], data.airports[idx][4]];
				}
				// Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
				var routesGroupByAirline = {};
				data.routes.forEach(function(route) {
					var airline = data.airlines[route[0]];
					var airlineName = airline[0];
					if (!routesGroupByAirline[airlineName]) {
						routesGroupByAirline[airlineName] = [];
					}
					routesGroupByAirline[airlineName].push(route);
				});
				var pointsData = [];
				data.routes.forEach(function(airline) {
					pointsData.push(getAirportCoord(airline[1]));
					pointsData.push(getAirportCoord(airline[2]));
				});
				var series = data.airlines
					.map(function(airline) {
						var airlineName = airline[0];
						var routes = routesGroupByAirline[airlineName];
						if (!routes) {
							return null;
						}
						return {
							type: 'lines3D',
							name: airlineName,
							effect: {
								show: true,
								trailWidth: 2,
								trailLength: 0.15,
								trailOpacity: 1,
								trailColor: 'rgb(30, 30, 60)'
							},
							lineStyle: {
								width: 1,
								color: 'rgb(50, 50, 150)',
								// color: 'rgb(118, 233, 241)',
								opacity: 0.1
							},
							blendMode: 'lighter',
							data: routes.map(function(item) {
								return [airports[item[1]].coord, airports[item[2]].coord];
							})
						};
					})
					.filter(function(series) {
						return !!series;
					});
				series.push({
					type: 'scatter3D',
					coordinateSystem: 'globe',
					blendMode: 'lighter',
					symbolSize: 2,
					itemStyle: {
						color: 'rgb(50, 50, 150)',
						opacity: 0.2
					},
					data: pointsData
				});
				myChart.setOption({
					legend: {
						selectedMode: 'single',
						left: 'left',
						data: Object.keys(routesGroupByAirline),
						orient: 'vertical',
						textStyle: {
			 			color: '#fff'
						}
					},
					globe: {
						environment: 'img/starfield.jpg',
						heightTexture: 'img/bathymetry_bw_composite_4k.jpg',
						displacementScale: 0.1,
						displacementQuality: 'high',
						baseColor: '#000',
			  	shading: 'realistic',
						realisticMaterial: {
							roughness: 0.2,
							metalness: 0
						},
						postEffect: {
							enable: true,
							depthOfField: {
								enable: false,
								focalDistance: 150
							}
						},
						temporalSuperSampling: {
							enable: true
						},
						light: {
							ambient: {
								intensity: 0
							},
							main: {
								intensity: 0.1,
								shadow: false
							},
							ambientCubemap: {
								texture: 'img/lake.hdr',
								exposure: 1,
								diffuseIntensity: 0.5,
								specularIntensity: 2
							}
						},
						viewControl: {
							autoRotate: false
						},
						silent: true
					},
					series: series
				});
				window.addEventListener('keydown', function() {
					series.forEach(function(series, idx) {
						myChart.dispatchAction({
							type: 'lines3DToggleEffect',
							seriesIndex: idx
						});
					});
				});
			});


			// 使用刚指定的配置项和数据显示图表。
			//myChart.setOption(option);
		</script>

	</body>
</html>
